<template>
  <div style="width: 100%;height: 78vh;">
    <!-- 头部公共部分 -->
    <div style="background-color: #F5F5F5;">
      <!-- 封面 -->
      <div style="float:left;">
        <img v-if="store.ccTrace.traceaPicture" :src="store.ccTrace.traceaPicture" class="avatars" />
      </div>
      <div>
        <table class="tables">
          <tr>
            <td>
              <h2>{{ store.ccTrace.goodsName }}</h2>
            </td>
          </tr>
          <tr>
            <td>
              生产批次 : {{ store.ccTrace.traceaBatch }}
            </td>
            <td>
              保质期(天) : {{ store.ccTrace.traceaQualityDay }}
            </td>
          </tr>
          <tr>
            <td>
              生产许可证号 : {{ store.ccTrace.traceaLicenseCode }}
            </td>
            <td>
              生产企业 : {{ store.ccTrace.traceaEnterpriseName }}
            </td>
          </tr>
          <tr>
            <td>
              <h3>产品检验报告:</h3>
              <el-upload v-model:file-list="fileList" action="https://localhost:7281/api/UploadTuPian"
                list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
                :on-success="handleAvatarSuccess" class="aaimg" :before-upload="beforeAvatarUpload">
                <el-icon>
                  <Plus />
                </el-icon>
              </el-upload>
              <el-dialog v-model="dialogVisible" class="imgyl">
                <img w-full :src="dialogImageUrl" alt="Preview Image" class="imgyll" />
              </el-dialog>
            </td>
          </tr>
        </table>
      </div>
    </div>
    <!-- 网页身体部分 -->
    <div style="background-color: #F5F5F5;margin-top: 15px;min-height: 80vh;">
      <el-menu style="margin-bottom: 40px;" :default-active="activeIndex" background-color="#F5F5F5"
        class="el-menu-demo" mode="horizontal" router>
        <el-menu-item index="InSU_Breed">养殖信息({{ store.ccWan.WanInSU_Breed }}/5)</el-menu-item>
        <el-menu-item index="InSU_Slaughter">屠宰信息({{ store.ccWan.WanInSU_Slaughter }}/4)</el-menu-item>
        <el-menu-item index="InSU_Deep">深加工信息({{ store.ccWan.WanInSU_Deep }}/5)</el-menu-item>
      </el-menu>
      <div style="margin-left: 50px;">
        <!-- 路由出口 -->
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';
import moment from 'moment';
import { compile, computed, onMounted, reactive, ref, watch } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { useRouter, useRoute } from 'vue-router';
import { useCounterStore } from '@/stores/counter';
import DepData from '@/stores/departmentData'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps, UploadUserFile } from 'element-plus'
//pini保存
const store = useCounterStore();
//跳转
const router = useRouter();
//跳转传参
const route = useRoute();

//#region 添加产品检验报告

//添加质检报道信息
const dialogVisible = ref(false)
const dialogImageUrl = ref('')

//添加请求表单
const addTestModel = reactive({
  "url": "",
  "pTyper": 1,
  "traceaBatch": store.ccTrace.traceaBatch,
  "traceaIsDelete": false
})

//添加图片请求
const addTest = () => {
  axios.post('https://localhost:7281/api/Trace/AddTest', addTestModel).then(res => {
    if (res.data.code == 212) {
      // 添加成功
      ElMessage.success(res.data.msg)
    }
  })
}

//储存图片列表
const fileList = ref<UploadUserFile[]>([])

const imgshow = () => {
  axios.get(`https://localhost:7070/api/Trace/GetTest?PTyper=1&TraceaBatch=${store.ccTrace.traceaBatch}&TraceaIsDelete=false`).then(res => {
    fileList.value = res.data.data
  })
}


//删除图片
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  // console.log(uploadFile, "获取删除数据uploadFile")
  // console.log(uploadFiles, "获取删除数据uploadFiles")
  axios.get(`https://localhost:7281/api/Trace/DeleteTest?Url=${uploadFile.url}&PTyper=1&TraceaBatch=${store.ccTrace.traceaBatch}`).then(res => {
    if (res.data.code == 204) {
      ElMessage.success("图片删除成功")
    } else if (res.data.code = 205) {
      ElMessage.error("图片删除失败")
    } else {
      ElMessage.error("图片删除出现错误")
    }
  })
}

//预览图片
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
}

//#endregion

//#region 身体导航栏
//默认导航信息页面
const activeIndex = ref('InSU_Breed')



//#endregion


//#region 图片增加

//图片添加操作
//定义图片存放变量
const imageUrl = ref('')

//上传后获取数据url
const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  // imageUrl.value = URL.createObjectURL(uploadFile.raw!)
  addTestModel.url = response.imgss;
  console.log(response, '返回的图片数据')
  console.log(addTestModel.url, "上传图片获取路径")
  addTest()
}

//图片上传前操作
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  // if (rawFile.type !== 'png') {
  //   ElMessage.error('只允许image/jpeg/png格式')
  //   return false
  // } else {
  //   return true
  // }
  return true
}

//#endregion

onMounted(() => {
  imgshow();
})

</script>

<style scoped>
/* 封面图片大小 */
.avatars {
  width: 178px;
  height: 178px;
  /* display: block; */
  border-radius: 33px;
}

.el-iconss {
  font-size: 15px;
}

.el-icona {
  margin-right: 20px;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.tables {
  margin-left: 232px;
}

.tables tr td {
  line-height: 33px;
  min-width: 360px;
}
</style>

<!-- 上传图片样式 -->
<style>
.avatar-uploader .el-upload {
  margin-top: 15px;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);

}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 50px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  text-align: center;
  background-color: #F2F2F2;
}

::v-deep .el-upload-list__item-thumbnail {
  width: 100px;
  /* 设置你想要的宽度 */
  height: 100px;
  /* 设置你想要的高度 */
  /* object-fit:cover; */
  /* 保持图片比例并覆盖整个容器 */
}


/* 预览图片 */
.imgyl .imgyll {
  width: 600px;
  height: 500px;
}

.imgyl {
  width: 640px;
  height: 540px;
}
</style>
